﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>图片压缩工具</title>
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/SiteJs.fileInputCheck.js")" type="text/javascript"></script>
    <style type="text/css">
        body
        {
            /*background-color: #5c87b2;*/
            background-color: #f1f1f1;
            background-image: url("@Url.Content("~/Content/images/bg.png")");
            font-size: 9pt;
            font-family: "Trebuchet MS" , Verdana, Helvetica, Sans-Serif;
            margin: 0;
            padding: 0;
            color: #696969;
        }
        .page
        {
            width: 80%;
            margin-left: auto;
            margin-right: auto; /*border-left:1px solid #a3a3a3;     border-right:1px solid #a3a3a3;     border-bottom:1px solid #a3a3a3;*/
            border: 7px solid #f1f1f1;
            background-color: White;
            min-height: 600px;
            min-width: 960px;
            max-width: 1440px;
        }
        .profile-bar
        {
            background-color: #535353;
            height: 30px;
            color: Whitesmoke;
            line-height: 30px;
            padding: 0 10px;
            min-width: 960px;
        }
        .ui-button
        {
            background-color: #f19149;
            color: white;
            font-size: small;
            box-shadow: 2px 2px 2px #535353;
            background-image: none;
        }
        .ui-fileinput
        {
            background-color: white;
            color: gray;
            font-size: small;
            box-shadow: 2px 2px 2px #535353;
            line-height: 27px;
            border: 4px solid #f19149;
            width: 360px;
        }
    </style>
</head>
<body>
    <div class="profile-bar" style="@(Request["_newpage"] == "true" ? "display:none;" : "")">
        <div class="float-left">
            <span class="icon-heart2"></span>图片压缩工具
        </div>
    </div>
    <div class="page">
        <br />
        <br />
        <br />
        <br />
        <br />
        <div style="text-align: center; font-size: small">
            <h1 style="">
                图片压缩转存工具
            </h1>
            @using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data", target = "targettempframe" }))
            {
                @Html.Hidden("tempid", "0")
 

                <table align="center">
                    <tr>
                        <td colspan="2">
                            <div id="filename">
                                &nbsp;
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="position: relative; overflow: hidden; width: 400px; padding: 4px;">
                                <div id="imgselbtn" class="ui-fileinput">
                                    <div>
                                        1、点击选择图片文件...</div>
                                </div>
                                <input style="position: absolute; filter: alpha(opacity=0); padding-bottom: 0px;
                                    margin: 0px; padding-left: 0px; padding-right: 0px; font-family: Arial; font-size: 118px;
                                    top: 0px; cursor: pointer; right: 0px; padding-top: 0px; opacity: 0;" type="file"
                                    id="userimageid" name="userimage" onchange="checking(this)" />
                            </div>
                        </td>
                        <td>
                            <input class="ui-button" type="submit" onclick="return checking(document.getElementById('userimageid'));"
                                value="2、提交转换" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <ul style="text-align: left">
                                <li>用于将较大的图片(如，大于800Kb的图片)转存为较小的图片。</li>
                                <li>如果已经是小图片则不必上处理。</li>
                                <li>最大支持处理10M的图片。</li>
                                <li>上传后稍等会提示下载，不必反复点击上传按钮。</li>
                                <li>较大的图片上传速度会比较慢，如有能力，建议使用一些常见<br />
                                    的图片工具自个人电脑上处理图片。</li>
                            </ul>
                        </td>
                    </tr>
                </table>

                

            }
            <script type="text/javascript">
                $(function () {
                    $(".ui-button").button({
                        icons: {
                            primary: "ui-icon-plus"
                        }
                    })
                });
                function checking(file) {
                    var r = fileInputCheck(file, 10);
                    if (!r) {
                        $("#imgselbtn").text("1、点击选择图片文件...");
                    }
                    return r;
                }

            </script>
        </div>

        <div style="display: none">
            <iframe width="100%" height="400px" name="targettempframe"></iframe>
        </div>

    </div>
    <footer>
            @Html.Partial("_FooterInnerPartial")
    </footer>
</body>
</html>
